<template>
  <div>
    <div class="askInvoice">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">发票</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i style="color:#f60" @click="$router.push(`/invoiceSetting`)">开票设置</i>
            </label>
          </button>
        </div>
      </header>
      <div class="address" v-for="(item,index) in userAddressList" :key="index" v-if="addressId == undefined && item.isDefault == 1" @click="toAddress">
        <p>
          <span style="margin-right:20px;">{{item.receiver}}</span>
          <span v-if="item.tel">{{item.phone}}，{{item.tel}}</span>
          <span v-else>{{item.phone}}</span>
        </p>
        <p>{{item.provinceName}} {{item.cityName}} {{item.areaName}}</p>
        <p>{{item.address}}</p>
        <i class="arrow-right"></i>
      </div>
      <div class="address" v-if="addressId" @click="toAddress">
        <p>
          <span style="margin-right:20px;">{{userAddress.receiver}}</span>
          <span v-if="userAddress.tel">{{userAddress.phone}}，{{userAddress.tel}}</span>
          <span v-else>{{userAddress.phone}}</span>
        </p>
        <p>{{userAddress.provinceName}} {{userAddress.cityName}} {{userAddress.areaName}}</p>
        <p>{{userAddress.address}}</p>
        <i class="arrow-right"></i>
      </div>
      <div class="setting" @click="toSetting" v-if="tempId == undefined && item.isDefault == 1" v-for="(item,index) in invoiceTempList" :key="index">
        发票抬头：{{item.invoiceTitle}}
        <i class="arrow-right"></i>
      </div>
      <div class="setting" @click="toSetting" v-if="tempId == item.id" v-for="(item,index) in invoiceTempList" :key="index">
        发票抬头：{{item.invoiceTitle}}
        <i class="arrow-right"></i>
      </div>
      <div class="setting" @click="toSetting" v-if="invoiceTempList == ''">
        尚未设置发票信息，点击前往添加
        <i class="arrow-right"></i>
      </div>
      <div class="orderGoods">
        <div class="c-order" v-for="(item,index) in orderList" :key="index">
          <div class="order-mid">
            <p>订单编号
              <span>{{item.orderCode}}</span>
              <span style="float:right">{{item.orderPayDate|formatDate('yyyy-MM-dd')}}</span>
            </p>
            <p>交易金额
              <span>￥{{item.orderPayPrice|formatMoney}}</span>
            </p>
            <p>支付方式
              <span>{{item.payType|payType}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="bot-info">
        <!--<span>合并订单数：4</span>-->
        <button @click="submit">确认索取</button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  toAddInvoiceInfo,
  getAddressList,
  getUserAddress,
  addInvoiceInfo
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import { Toast, MessageBox } from 'mint-ui'
export default {
  data() {
    return {
      orderIds: this.$route.query.orderIds,
      addressId: this.$route.query.addressId,
      tempId: this.$route.query.tempId,
      orderList: [],
      userAddressList: [],
      invoiceTempList: [],
      userAddress: {}
    }
  },
  watch: {},
  components: {
  },
  created() {
    this.fetchData()
  },
  filters: {
    payType(val) {
      return val === 0 ? '' : val === 1 ? '微信' : val === 2 ? '支付宝' : val === 3 ? '银联' : val === 4 ? '转账' : val === 5 ? '余额' : val === 6 ? '财付通' : '未知'
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id,
        orderIds: this.orderIds
      }
      toAddInvoiceInfo(formData).then(res => {
        this.orderList = res.data.orderList
        this.invoiceTempList = res.data.invoiceTempList
      })
      getAddressList({ userId: this.userInfo.id }).then(res => {
        this.userAddressList = res.data.userAddressList
      })
      if (this.addressId) {
        getUserAddress({ addressId: this.addressId }).then(res => {
          this.userAddress = res.data.userAddress
        })
      }
    },
    toAddress() {
      this.$router.push({ path: 'invoiceAddress', query: { orderIds: this.orderIds }})
    },
    toSetting() {
      this.$router.push({ path: 'chooseInvoice', query: { orderIds: this.orderIds, addressId: this.addressId }})
    },
    submit() {
      const formData = {
        userId: this.userInfo.id,
        orderIds: this.orderIds,
        addressId: this.addressId,
        tempId: this.tempId,
        invoicePrice: this.$route.query.invoicePrice
      }
      MessageBox.confirm('确定执行此操作?').then(action => {
        addInvoiceInfo(formData).then(res => {
          this.$router.push({ path: 'applyInvoice' })
          Toast('发票申请成功')
        }).catch(err => {
          Toast(err.info)
        })
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.askInvoice {
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 105px;
  background-color: #fff;
  header {
    height: 45px;
    background-color: #FFF;
    color: #000;
    border-bottom: 1px solid #ECECEC;
    z-index: 2!important;
  }
  .title {
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    padding: 0 15px;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .address {
    background: #fffbe7;
    padding: 15px;
    position: relative;
    line-height: 20px;
    .arrow-right {
      display: block;
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -.25rem;
      width: .45rem;
      height: .45rem;
      background: url('~assets/common/images/arrow-right.png') no-repeat;
      background-size: auto 100%;
    }
  }
  .setting {
    padding: 30px 15px;
    background-color: rgb(252, 252, 252);
    margin: 10px 0;
    position: relative;
    .arrow-right {
      display: block;
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -.25rem;
      width: .45rem;
      height: .45rem;
      background: url('~assets/common/images/arrow-right.png') no-repeat;
      background-size: auto 100%;
    }
  }
  .orderGoods {
    .c-order {
      padding: 15px;
      background-color: rgb(252, 252, 252);
      overflow: hidden;
      border-top: 1px solid #ECECEC;
      position: relative;
      i {
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 15px;
      }
      .order-mid {
        position: relative;
        float: left;
        width: 100%;
        height: 100%; //   line-height: 25px;
        p {
          line-height: 25px;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        span {
          color: rgb(190, 190, 190);
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
  }
  .bot-info {
    height: 44px;
    width: 100%;
    color: #767676;
    text-align: right;
    line-height: 20px;
    padding: 10px 15px;
    position: fixed;
    bottom: 0;
    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
    span {
      position: absolute;
      left: 15px;
      top: 50%;
      margin-top: -12.5px;
      color: #000;
      line-height: 21px;
      i {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    button {
      color: #FFF;
      background: #4a90e2;
      height: 44px;
      width: 110px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>
